<template>
	<view class="mask"  :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
		<view :style="{marginBottom:maskBottom+'rpx'}" class="mask-content" @click.stop.prevent="stopPrevent">

			<view class="mask-content-input">
				<textarea class="textarea" v-model="content" :placeholder="placeholder" 
				 :cursor-spacing="100" :show-confirm-bar="false" :adjust-position="false"
				 :focus="focus" maxlength="140" @focus="resize()" @blur="autosize()"></textarea>
			</view>
			<view class="mask-content-topbar">
				<!-- <view class="left" @click="toggleMask">取消</view> -->
				<view class="right" :class="content!=''?'send':''" @click="pubComment">发布</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ygcComment",
		//属性
		props: {
			placeholder: {
				type: String
			}
		},
		data() {
			return {
				keyHeight:0,
				maskBottom:0,
				maskState: 0,
				content: '',
				focus: false
			};
		},
		created() {
			uni.onKeyboardHeightChange(res =>{
				this.keyHeight = res.height;
			})
		},
		methods: {
			autosize(){
				this.maskBottom = 0;
			},
			resize(){
				this.maskBottom = 0;
				if(this.keyHeight == 0){
					uni.onKeyboardHeightChange(res =>{
						this.keyHeight = res.height;
						this.maskBottom = this.keyHeight+380;
					})
				}
				else
					this.maskBottom = this.keyHeight+380;
			},
			stopPrevent() {},
			toggleMask(type) {
				let timer = type === 'show' ? 1 : 0;
				let state = type === 'show' ? 1 : 0;
				// this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
					
					// #ifdef APP-PLUS
					// 安卓app软键盘自动弹出有点问题，暂时还没有很好的解决方案，所以就禁止安卓app软键盘自动弹出，如果哪位朋友有好的解决方案可以在评论里告诉大家参考一下
					if (uni.getSystemInfoSync().platform == "ios") {
						this.focus = this.maskState ? true : false;
					}
					// #endif
					// #ifndef APP-PLUS
					this.focus = this.maskState ? true : false;
					// #endif
				}, timer)
			},
			pubComment() {
				if(this.content=='') return
				this.$emit('pubComment', this.content);
				this.content=''
			}
		}
	}
</script>

<style lang="scss" scoped>
	$font-color-base: #606266;
	$base-color: #196DEC;

	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom:0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;
		-webkit-transition: .3s;

		.mask-content {
			width: 100%;
			height: 208upx;
			background: #F2F2F2;
			transform: translateY(100%);
			transition: .3s; //底部弹出的持续时间
			-webkit-transition: .3s; //底部弹出的持续时间 
			// overflow-y:scroll;
			display: flex;
			flex-direction: row;

			.mask-content-topbar {
				display: flex;
				flex: 1;
				flex-direction: row;
				justify-content: space-between;
				font-size: 32upx;
				align-items: flex-end;
				// .left {
				// 	padding: 10upx 0upx;
				// 	color: $font-color-base;
				// }

				.right {
					flex: 1;
					padding: 24upx 0;
					text-align: center;
					color: #A3A3A3;
					
				}
				.send{
					color: #196DEC;
				}
			}

			.mask-content-input {
				width: 634upx;
				height: 160upx;
				margin-left: 20upx;
				margin-top: 24upx;
				// width: 100%;
				
				
				.textarea {
					background: #FFFFFF;
					width: 594upx; 
					height: 120upx;
					padding: 20upx;
					// width: 100%;
					border: 2upx solid #d5d5d6;
					border-radius: 8upx;
				}
			}
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}
</style>
